<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 100% !important;
            border-collapse: collapse !important;
            margin: 20px 0 !important;
            font-size: 18px !important;
            text-align: left !important;
        }

        th, td {
            padding: 10px !important;
            border: 1px solid #ddd !important;
        }

        th {
            background-color: #4CAF50 !important;
            color: white !important;
            font-weight: bold !important;
        }

        /* 交替 Order ID 颜色 */
        tr:nth-child(odd) {
            background-color: #f2f2f2 !important;
        }

        tr:nth-child(even) {
            background-color: #e6f7ff !important;
        }

        /* 鼠标悬停效果 */
        tr:hover {
            background-color: #d1e0e0 !important;
            transition: background-color 0.3s ease !important;
        }
    </style>

</head>

<header th:replace="common/cms_top"></header>

<body>


<table>
    <tr>
        <th>Order ID</th>
        <th>Quantity</th>
        <th>User ID</th>
        <th>Item ID</th>
    </tr>
    <tr th:each="orderDetail :${orderDetailList}">
        <td th:text="${orderDetail.getOrderid()}"></td>
        <td th:text="${orderDetail.getQuantity()}"></td>
        <td th:text="${orderDetail.getUserid()}"></td>
        <td th:text="${orderDetail.getItemid()}"></td>
    </tr>

</table>

<!-- 包含公共底部文件 -->
<footer th:replace="common/bottom"></footer>
</body>
</html>